<template>
  <div id="app" class="Table" style="margin-bottom:20px ;">
    <a-table :loading="loading" :pagination="false" :columns="columns" :data-source="dataSource" rowKey="id" bordered :scroll="{x:true,y:800}">
      <template slot="imgSlot" slot-scope="text,record">
        <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
        <img v-else :src="getImgView(text)" :preview="record.id" height="25px" alt="" style="max-width:80px;font-size: 12px;font-style: italic;"/>
      </template>
    </a-table>
  </div>
</template>
<script>
import {  filterDictTextByCache } from '@/components/dict/JDictSelectUtil'
import {getFileAccessHttpUrl } from '@/api/manage'
export default {
  name: 'Table',
  data() {
    return {
      loading:false,
      columns:[
        
        
      ],
      dataSource:[
      ],
    }
  },
  props:["tableData", "dataForm"],
  watch:{
    tableData:{
      handler(val){
        this.handleData(val);
      },
      deep:true
    }
  },
  components: {},

  filters: {},

  computed: {},

  created() {
  },

  activated() {},

  mounted() {},

  methods: {
     /* 图片预览 */
     getImgView(text){
      if(text && text.indexOf(",")>0){
        text = text.substring(0,text.indexOf(","))
      }
      return getFileAccessHttpUrl(text)
    },
    handleLoding(){
      this.loading = !this.loading;
    },
    handleData(val){
      this.columns = [
        {
          title: '年级',
          align: 'center',
          width:80,
          // fixed:"left",
          dataIndex: 'classType',
          customRender:function(text){
            return filterDictTextByCache("class_type",text)
          }
        },
        {
          title: '班级',
          align: 'center',
          // fixed:"left",
          dataIndex: 'className',
          width:100,
        }
      ]
      if (this.dataForm.classId) {
        this.columns.push({
          title: '姓名',
          align: 'center',
          dataIndex: 'name',
          width: 100,
        },
        {
          title: '年龄',
          align: 'center',
          dataIndex: 'age',
          width: 100,
        },{
          title: '性别',
          align: 'center',
          dataIndex: 'sex',
          width: 100,
        },{
          title: '照片',
          align: 'center',
          dataIndex: 'photo',
          scopedSlots: {customRender: 'imgSlot'},
          width: 100,
        })
      }
      let keys = Object.keys(val).sort((a, b)=> a.localeCompare(b)), list = [];
      keys.forEach(item => {
        val[item].map(el=>{
          let elJson = {
            id:el.id,
            classType:el.classType,
            className:el.className
          };
          if (this.dataForm.classId) {
            elJson.name = el.name;
            elJson.age = this.getAge(el.birthday);
            elJson.sex = filterDictTextByCache("sex",el.sex);
            elJson.photo = el.photo;
          }
          elJson[`${item}steps`] = el.steps;
          elJson[`${item}calories`] = el.calories;
          elJson[`${item}heartAvg`] = Math.ceil(el.heartAvg);
          elJson[`${item}heartMax`] = el.heartMax;
          elJson[`${item}heartMin`] = el.heartMin;
          list.push(elJson)
        })
        this.columns.push({
          title: item,
          align: 'center',
          children:[
            {
              title: '步数',
              align: 'center',
              width: 100,
              dataIndex: item + 'steps',
              customRender: function(text) {
                return text || '-'
              }
            },
            {
              title: '运动强度(卡路里)',
              align: 'center',
              width: 150,
              dataIndex: item +'calories',
              customRender: function(text) {
                return text || '-'
              }
            },
            {
              title: '最低心率',
              align: 'center',
              width: 100,
              dataIndex: item +'heartMin',
              customRender: function(text) {
                return text || '-'
              }
            },
            {
              title: '最高心率',
              align: 'center',
              width: 100,
              dataIndex: item +'heartMax',
              customRender: function(text) {
                return text || '-'
              }
            },
            {
              title: '平均心率',
              align: 'center',
              width: 100,
              dataIndex: item +'heartAvg',
              customRender: function(text) {
                return text || '-'
              }
            },
          ]
        })
      });
      this.dataSource = this.merge(list, "id");
      this.columns[0].fixed = this.columns.length > 7 ? "left" :false;
      this.columns[1].fixed = this.columns.length > 7 ? "left" :false;
      // if (this.dataForm.classId) {
      //   this.dataSource = this.merge(list, "name")
      // }else{
      //   this.dataSource = this.merge(list, "className")
      // }
    },
    // 根据传入字段合并数组
    merge(array, prop){
      var mergedArray = array.reduce(function(result, obj) {
        var target = result.find(function(item) {
          return item[prop] === obj[prop];
        });
        if (target) {
          Object.assign(target, obj);
        } else {
          result.push(obj);
        }
        return result;
      }, []);
      return mergedArray;
    },
    //根据日期算年龄
    getAge(birthday){
      if(birthday){
        birthday=birthday.split('-');
        // 新建日期对象
        let date = new Date();
        // 今天日期，数组，同 birthday
        let today = [date.getFullYear(), date.getMonth() + 1, date.getDate()];
        // 分别计算年月日差值
        let age = today.map((val, index) => {
            return val - birthday[index]
        })
        // 当天数为负数时，月减 1，天数加上月总天数
        if (age[2] < 0) {
            // 简单获取上个月总天数的方法，不会错
            let lastMonth = new Date(today[0], today[1], 0)
            age[1]--
            age[2] += lastMonth.getDate()
        }
        // 当月数为负数时，年减 1，月数加上 12
        if (age[1] < 0) {
            age[0]--
            age[1] += 12
        }
        return age[0]
      }
    },
  }
}
</script>
<style scoped>
/* @import url(); 引入css类 */
</style>
